/* Element Plus 组件样式覆盖 */

// 表格相关
.el-table {
  // 确保表格在数据过多时可以水平滚动
  width: 100% !important;
  overflow-x: auto !important;
  
  // 表格边框样式修复
  &.el-table--border {
    border-right: 1px solid var(--el-border-color-lighter);
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
  
  // 固定右侧列的样式
  .el-table__fixed-right {
    height: 100% !important;
    box-shadow: -3px 0 6px rgba(0, 0, 0, 0.06);
  }
  
  // 固定左侧列的样式
  .el-table__fixed {
    height: 100% !important;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.06);
  }
  
  // 表格内容溢出处理
  .el-table__cell {
    .cell {
      word-break: break-word;
    }
  }
  
  // 表格行悬停效果增强
  .el-table__row {
    &:hover {
      td {
        background-color: var(--el-fill-color-light) !important;
      }
    }
  }
  
  // 表格斑马纹样式增强
  &.el-table--striped {
    .el-table__row--striped {
      td {
        background-color: var(--el-fill-color-lighter);
      }
      
      &:hover {
        td {
          background-color: var(--el-fill-color-light) !important;
        }
      }
    }
  }
}

// 确保表格容器可以滚动
.el-table-wrapper {
  overflow-x: auto !important;
}

// 输入框样式优化
.el-input {
  &.is-active, &:hover {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset;
    }
  }
  
  // 输入框前缀图标样式
  .el-input__prefix {
    color: var(--el-text-color-secondary);
  }
}

// 按钮样式优化
.el-button {
  // 链接按钮样式增强
  &.el-button--link {
    padding: 4px 8px;
    
    &.el-button--primary {
      color: var(--el-color-primary);
    }
    
    &.el-button--success {
      color: var(--el-color-success);
    }
    
    &.el-button--warning {
      color: var(--el-color-warning);
    }
    
    &.el-button--danger {
      color: var(--el-color-danger);
    }
    
    &.el-button--info {
      color: var(--el-color-info);
    }
  }
  
  // 按钮图标样式
  .el-icon {
    margin-right: 4px;
  }
}

// 下拉菜单样式优化
.el-dropdown-menu {
  border-radius: 6px;
  box-shadow: var(--el-box-shadow-light);
}

// 对话框样式优化
.el-dialog {
  border-radius: 8px;
  overflow: hidden;
  max-width: 90vw;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  
  @media (max-width: 768px) {
    width: 90% !important;
  }
  
  // 对话框头部样式
  .el-dialog__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
    margin-right: 0;
  }
  
  // 对话框内容区域
  .el-dialog__body {
    padding: 20px;
  }
  
  // 对话框底部
  .el-dialog__footer {
    padding: 10px 20px;
    border-top: 1px solid var(--el-border-color-light);
  }
}

// 分页组件样式优化
.el-pagination {
  padding: 12px 0;
  
  // 分页按钮样式
  button {
    &:hover {
      color: var(--el-color-primary);
    }
  }
  
  // 分页输入框样式
  .el-pagination__editor {
    &.is-focus {
      border-color: var(--el-color-primary);
    }
  }
  
  // 移动端适配
  @media (max-width: 768px) {
    .el-pagination__sizes {
      display: none !important;
    }
  }
}

// 卡片样式优化
.el-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: var(--el-box-shadow);
  }
}

// 表单样式优化
.el-form {
  // 表单验证失败时的样式
  .el-form-item.is-error {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
  }
}

// 搜索按钮样式优化
.search-buttons {
  display: flex;
  gap: 10px;
  
  .el-button {
    margin: 0;
  }
}

// 弹出确认框样式优化
.el-popconfirm {
  .el-popconfirm__main {
    margin-bottom: 10px;
  }
}

// 状态标签样式
.el-tag {
  &.el-tag--mini {
    height: 20px;
    padding: 0 5px;
    font-size: 12px;
  }
}

// 日期选择器样式
.el-date-picker {
  .el-picker-panel__content {
    width: 100%;
  }
}

// 抽屉样式
.el-drawer {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);
  }
  
  .el-drawer__body {
    padding: 20px;
    overflow-y: auto;
  }
}
